<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title>Yui Carousel Component sample with GwtYuiCarousel - JavaScript Load</title>
		<script type="text/javascript" src="resources/yui/utilities.js"></script>
		<script type="text/javascript" src="resources/yui/container_core-min.js"></script>
		<script type="text/javascript" src="carousel_min.js"></script>
		<link rel="stylesheet" type="text/css" href="resources/css/yui.css"/>
		<link rel="stylesheet" type="text/css" href="resources/css/reset-fonts-grids.css"/>
		<link rel="stylesheet" type="text/css" href="resources/css/carousel.css"/>
		<!-- GWT module to use -->    
		<meta name='gwt:module' content='com.gwtyuicarousel.spotlight.SpotLight'>

		<!-- The specific CSS style for the sample -->
		<style type="text/css">
		.carousel-component {
			padding:0px;
		}
		.carousel-component .carousel-list li { 
			margin:4px;
			width:85px; /* img width is 75 px from flickr + a.border-left (1) + a.border-right(1) + 
			               img.border-left (1) + img.border-right (1) + a.margin (6)*/
			/*	margin-left: auto;*/ /* for testing IE auto issue */
		}
		
		.carousel-component .carousel-list li a { 
			display:block;
			margin:3px;
			border:1px solid #e2edfa;
			outline:none;
			-moz-outline:none; 
		}
		
		.carousel-component .carousel-list li a:hover { 
			border: 1px solid #87bf4e; 
		}
		
		.carousel-component .carousel-list li img { 
			border:1px solid #999;
			display:block; 
			margin:4px 0px 0px 4px;
		}
		
		.carousel-component .carousel-list li strong { 
			display:block; 
		}
											
		
		#prev-arrow { 
			position:absolute;
			top:40px;
			z-index:3;
			cursor:pointer; 
			left:5px; 
		}
		
		#next-arrow { 
			position:absolute;
			top:40px;
			z-index:3;
			cursor:pointer; 
			right:5px; 
		}
		
		.spotlight {
			border: 1px solid #2222ff;
			filter: alpha(opacity=100); -moz-opacity:1.0;
		}
		
		.non-spotlight {
			border: 1px solid #e2edfa;
			filter: alpha(opacity=60); -moz-opacity:0.6;
		}
		
		#preview {
			margin: 20px 100px 0px 0px;
			padding:4px;
			clear:both;
		}
		
		#preview img {
			border: 1px solid gray;
			padding:4px;
		}
		
		pre {
			font-size:10px;
		}
		</style>
	</head>
	<body>
		<!-- The GWT script to run -->
		<script type="text/javascript" language="javascript" src="gwt.js"></script>
	</body>
</html>